<template>
  <view class="setting-panel" :class="seeMode">
    <view class="item">
      <view class="label">答对自动跳到下一题</view>
      <switch class="switch" :checked="answerCorrectAutoPre" :color="switchColor"
        @change="onAnswerCorrectAutoPreChange" />
    </view>
    <view class="item">
      <view class="label">答题提示音</view>
      <switch class="switch" :checked="answerTipSound" :color="switchColor" @change="onAnswerTipSoundChange" />
    </view>
    <view class="item">
      <view class="label">语音播放</view>
    </view>
    <!-- 答题-语音播放-选项 -->
    <view class="sound_play_options" :class="seeMode">
      <view class="option" :class="item.value == answerSoundPlay ? 'active' : ''"
        v-for="(item, index) in answerSoundPlayOptions" :key="index" @tap="onAnswerSoundPlayOptionChange(item.value)">
        <view class="circle">
          <view class="inner"></view>
        </view>
        <view class="label">{{ item.label }}</view>
      </view>
    </view>
    <view class="item">
      <view class="label">答题技巧-悬浮按钮</view>
      <switch class="switch" :checked="answerSkillBtn" :color="switchColor" @change="onAnswerSkillBtnChange" />
    </view>
    <!-- 切换字号 -->
    <view class="switch_font_size">
      <!-- 提示 -->
      <view class="switch_font_size_tip">
        <view class="left">小号</view>
        <view class="middle" :class="seeMode">A{{ currentFontSizeLevel }}</view>
        <view class="right">特大</view>
      </view>
      <view class="switch_font_size_container">
        <view class="leftA">A</view>
        <view class="content">
          <view class="line"></view>
          <view class="dots">
            <view class="dot" v-for="(item, index) in 6" :key="index" @tap="onTapFontSizeLevel(index + 1)"></view>
          </view>
          <movable-area class="movable-area">
            <movable-view class="ball" :class="seeMode" direction="horizontal" :out-of-bounds="false"
              @change="onSwitchFontLevelChange" :x="switchFontSizeLevelBallPositionX"
              @touchend="onSwitchFontSizeLevelLevel"></movable-view>
          </movable-area>
        </view>
        <view class="rightA">A</view>
      </view>
    </view>
    <!-- 模式 -->
    <view class="see-mode" :class="seeMode">
      <view class="see-mode-item " :class="settingStore.seeMode == 'huyanmoshi' ? 'active' : ''"
        @tap="onSeeModeChange('huyanmoshi')">
        <view class="see-mode-item-icon icon-huyanmoshi "></view>
        <view class="see-mode-item-label">护眼模式</view>
      </view>
      <view class="see-mode-item" :class="settingStore.seeMode == 'yejianmoshi' ? 'active' : ''"
        @tap="onSeeModeChange('yejianmoshi')">
        <view class="see-mode-item-icon icon-yejianmoshi"></view>
        <view class="see-mode-item-label">夜间模式</view>
      </view>
      <view class="see-mode-item" :class="settingStore.seeMode == 'rijianmoshi' ? 'active' : ''"
        @tap="onSeeModeChange('rijianmoshi')">
        <view class="see-mode-item-icon icon-rijianmoshibeifen"></view>
        <view class="see-mode-item-label">日间模式</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref, computed, toValue, onMounted, watch } from 'vue'
  import { onShow } from '@dcloudio/uni-app'
  import { useSettingStore } from '@/stores/modules/setting'

  const settingStore = useSettingStore()
  // 答题-答对-自动跳到下一题
  const answerCorrectAutoPre = computed(() => settingStore.answerCorrectAutoPre)
  // 答题-答对-自动跳到下一题 checked 改变时触发 change 事件
  const onAnswerCorrectAutoPreChange = (e: UniHelper.SwitchOnChangeEvent) => {
    settingStore.setAnswerCorrectAutoPre(e.detail.value)
  }


  // 答题-提示音
  const answerTipSound = computed(() => settingStore.answerTipSound)

  const onAnswerTipSoundChange = (e: UniHelper.SwitchOnChangeEvent) => {
    settingStore.setAnswerTipSound(e.detail.value)
  }

  // 答题-语音播放选项-枚举
  enum AnswerSoundPlayOptionEnum {
    'Topic',
    'Topic_Option',
    'Topic_Answer'
  }
  // 语音播放选项列表
  const answerSoundPlayOptions = ref([
    {
      label: "读题",
      value: AnswerSoundPlayOptionEnum.Topic,
    },
    {
      label: "读题+选项",
      value: AnswerSoundPlayOptionEnum.Topic_Option
    },
    {
      label: "读题+答案",
      value: AnswerSoundPlayOptionEnum.Topic_Answer
    }
  ])

  // 语音播放选项
  const answerSoundPlay = computed(() => settingStore.answerSoundPlay)
  // 语音播放选项选项发生变化
  const onAnswerSoundPlayOptionChange = (val: AnswerSoundPlayOptionEnum) => {
    settingStore.setAnswerSoundPlay(val)
  }

  // 答题技巧-悬浮按钮
  const answerSkillBtn = computed(() => settingStore.answerSkillBtn)
  const onAnswerSkillBtnChange = (e: UniHelper.SwitchOnChangeEvent) => {
    settingStore.setAnswerSkillBtn(e.detail.value)
  }

  // 切换字体-小球的X位置
  const fontSizeLevelBallPositionX = ref<number>(0)
  // 切换字体发生改变的事件
  const onSwitchFontLevelChange = (e: UniHelper.MovableViewOnChangeEvent) => {
    fontSizeLevelBallPositionX.value = e.detail.x
  }

  // 获取安全区域
  const { safeArea } = uni.getSystemInfoSync()
  // 页面宽度
  let pageWidth = safeArea?.width || 0
  let fontSizeLevelBallPositionX_1 = 0
  let fontSizeLevelBallPositionX_2 = pageWidth * 0.1 + 10
  let fontSizeLevelBallPositionX_3 = pageWidth * 0.25 + 25
  let fontSizeLevelBallPositionX_4 = pageWidth * 0.4 + 20
  let fontSizeLevelBallPositionX_5 = pageWidth * 0.6 + 10
  let fontSizeLevelBallPositionX_6 = pageWidth * 0.8
  // #ifdef MP-WEIXIN
  fontSizeLevelBallPositionX_5 += 3
  fontSizeLevelBallPositionX_6 += 10
  // #endif
  // 当前字号
  const currentFontSize = computed(() => settingStore.fontSize + 'rpx')
  // 当前字体级别
  const currentFontSizeLevel = ref<string>()
  const switchFontSizeLevelBallPositionX = ref<number>()
  // 切换字体基本
  const onSwitchFontSizeLevelLevel = () => {
    let positionX = fontSizeLevelBallPositionX.value
    switchFontSizeLevelBallPositionX.value = positionX
    if (positionX >= fontSizeLevelBallPositionX_1 && positionX <= fontSizeLevelBallPositionX_2) {
      if ((fontSizeLevelBallPositionX_2 - positionX) > ((fontSizeLevelBallPositionX_2 - fontSizeLevelBallPositionX_1) / 2)) {
        positionX = fontSizeLevelBallPositionX_1
      }
      else {
        positionX = fontSizeLevelBallPositionX_2
      }
    }
    else if (positionX >= fontSizeLevelBallPositionX_2 && positionX <= fontSizeLevelBallPositionX_3) {
      if ((fontSizeLevelBallPositionX_3 - positionX) > ((fontSizeLevelBallPositionX_3 - fontSizeLevelBallPositionX_2) / 2)) {
        positionX = fontSizeLevelBallPositionX_2
      }
      else {
        positionX = fontSizeLevelBallPositionX_3
      }
    }
    else if (positionX >= fontSizeLevelBallPositionX_3 && positionX <= fontSizeLevelBallPositionX_4) {
      if ((fontSizeLevelBallPositionX_4 - positionX) > ((fontSizeLevelBallPositionX_4 - fontSizeLevelBallPositionX_3) / 2)) {
        positionX = fontSizeLevelBallPositionX_3
      }
      else {
        positionX = fontSizeLevelBallPositionX_4
      }
    }

    else if (positionX >= fontSizeLevelBallPositionX_4 && positionX <= fontSizeLevelBallPositionX_5) {
      if ((fontSizeLevelBallPositionX_5 - positionX) > ((fontSizeLevelBallPositionX_5 - fontSizeLevelBallPositionX_4) / 2)) {
        positionX = fontSizeLevelBallPositionX_4
      }
      else {
        positionX = fontSizeLevelBallPositionX_5
      }
    }
    else if (positionX >= fontSizeLevelBallPositionX_5) {
      if ((fontSizeLevelBallPositionX_6 - positionX) > ((fontSizeLevelBallPositionX_6 - fontSizeLevelBallPositionX_5) / 2)) {
        positionX = fontSizeLevelBallPositionX_5
      }
      else {
        positionX = fontSizeLevelBallPositionX_6
      }
    }

    setTimeout(() => {
      switchFontSizeLevelBallPositionX.value = positionX
    }, 20);

    let fontSize = 36
    switch (positionX) {
      case fontSizeLevelBallPositionX_1:
        currentFontSizeLevel.value = '小号'
        fontSize = 34
        break
      case fontSizeLevelBallPositionX_2:
        currentFontSizeLevel.value = '标准'
        fontSize = 36
        break
      case fontSizeLevelBallPositionX_3:
        currentFontSizeLevel.value = '中号'
        fontSize = 38
        break
      case fontSizeLevelBallPositionX_4:
        currentFontSizeLevel.value = '大号'
        fontSize = 40
        break
      case fontSizeLevelBallPositionX_5:
        currentFontSizeLevel.value = '偏大'
        fontSize = 42
        break
      case fontSizeLevelBallPositionX_6:
        currentFontSizeLevel.value = '特大'
        fontSize = 44
        break
    }

    // 设置字号-持久化
    settingStore.setFontSize(fontSize)

  }

  // 点击这是字号级别
  const onTapFontSizeLevel = (fontSizeLevelIndex: number) => {
    uni.showToast({
      title: "请选择2个及以上答案",
      icon: "none",
      duration: 2000
    })
  }

  // 根据字号设置字体级别
  const setFontSizeLevel = (fontSize: number) => {
    let fontLevel = '标准'
    let fontLevelPositionX = fontSizeLevelBallPositionX_2
    switch (fontSize) {
      case 34:
        fontLevel = '小号'
        fontLevelPositionX = fontSizeLevelBallPositionX_1
        break
      case 36:
        fontLevel = '标准'
        fontLevelPositionX = fontSizeLevelBallPositionX_2
        break
      case 38:
        fontLevel = '中号'
        fontLevelPositionX = fontSizeLevelBallPositionX_3
        break
      case 40:
        fontLevel = '大号'
        fontLevelPositionX = fontSizeLevelBallPositionX_4
        break
      case 42:
        fontLevel = '偏大'
        fontLevelPositionX = fontSizeLevelBallPositionX_5
        break
      case 44:
        fontLevel = '特大'
        fontLevelPositionX = fontSizeLevelBallPositionX_6
        break
    }
    switchFontSizeLevelBallPositionX.value = fontLevelPositionX
    currentFontSizeLevel.value = fontLevel
  }

  // 改变显示模式
  const onSeeModeChange = (val: string) => {
    settingStore.setSeeMode(val)
  }

  // 答题-显示模式
  const seeMode = computed(() => settingStore.seeMode)

  const switchColor = ref('#27C463')
  watch(seeMode, () => {
    if (seeMode.value == 'yejianmoshi') {
      switchColor.value = '#449c49'
    } else {
      switchColor.value = '#27C463'
    }
  },
    {
      immediate: true,
    }
  )

  onShow(() => {
    setFontSizeLevel(settingStore.fontSize)
    console.log('setFontSizeLevel', settingStore.fontSize)
  })

</script>

<style scoped lang="scss">
  .setting-panel {
    display: flex;
    flex-direction: column;
    padding: 60rpx 20rpx;
    font-size: 30rpx;
    color: #747985;
    background-color: #fff;
    border-radius: 10px 10px 0 0;

    &.yejianmoshi {
      background-color: #181b1d;
      color: #999;
    }

    &.huyanmoshi {
      background-color: #f8f7ed;
    }
  }

  // 列表-项
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;

    .switch {
      transform: scale(1);
    }
  }

  //答题-语音播放-选项
  .sound_play_options {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: rgb(247, 246, 249);
    height: 100rpx;


    .option {
      display: flex;
      align-items: center;

      .circle {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 35rpx;
        height: 35rpx;
        box-sizing: border-box;
        border: 2rpx solid #27C463;
        border-radius: 50%;

        .inner {
          width: 18rpx;
          height: 18rpx;
          background-color: #27C463;
          border-radius: 50%;
          display: none;
        }

      }

      .label {
        margin-left: 10rpx;
        color: rgb(112, 118, 121);
        font-size: 26rpx;
      }

      &.active {
        .circle {
          .inner {
            display: flex;
          }
        }
      }
    }


    &.yejianmoshi {
      background-color: #222;

      .option {
        .circle {
          border-color: #449c49;

          .inner {
            background-color: #449c49;
          }
        }


      }
    }

    &.huyanmoshi {
      background-color: #f4f2e0;
    }
  }

  // 切换字号
  .switch_font_size {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 150rpx;

    .switch_font_size_tip {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 10rpx;
      padding: 0 40rpx;
      font-size: 28rpx;
      color: #747985;
      height: 50rpx;

      .left,
      .rgiht {
        vertical-align: baseline;

      }

      .middle {
        font-size: v-bind(currentFontSize);
        color: #000;
        font-weight: bold;
        vertical-align: baseline;

        &.yejianmoshi {
          color: #999;
        }
      }
    }

    .switch_font_size_container {
      display: flex;
      align-items: center;

      .leftA {
        padding-right: 20rpx;
        font-size: 36rpx;
      }

      .rightA {
        padding-left: 20rpx;
        font-size: 54rpx;
        text-align: right;
      }

      .content {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;


        .line {
          position: absolute;
          left: 0;
          top: 50%;
          z-index: 1;
          width: 100%;
          height: 2rpx;
          background-color: #999;
        }

        .dots {
          position: absolute;
          left: 0;
          top: -4rpx;
          z-index: 2;
          display: flex;
          justify-content: space-between;
          width: 100%;

          .dot {
            width: 10rpx;
            height: 10rpx;
            background-color: #999;
            border-radius: 100%;
          }
        }

        .movable-area {
          position: absolute;
          left: 0;
          top: -20rpx;
          z-index: 4;
          width: 100%;
          height: 40rpx;

          .ball {
            width: 42rpx;
            height: 42rpx;
            border-radius: 50%;
            background-image: linear-gradient(90deg,
                #0cea75 0%,
                #08c160 100%),
              linear-gradient(#00cbe5,
                #00cbe5);

            &.yejianmoshi {
              background-image: linear-gradient(90deg,
                  #09b65a 0%,
                  #057139 100%)
            }
          }
        }
      }
    }
  }

  // 模式
  .see-mode {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;

    .see-mode-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .see-mode-item-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20rpx;
        width: 70rpx;
        height: 70rpx;
        font-size: 50rpx;
        border-radius: 50%;
        border: 2rpx solid #747985;
      }

      &.active {
        .see-mode-item-icon {
          background-image: linear-gradient(90deg,
              #0cea75 0%,
              #08c160 100%),
            linear-gradient(#00cbe5,
              #00cbe5);
          border-width: 0;
          color: #fff;
        }

        .see-mode-item-label {
          color: #000;
        }
      }



    }

    &.yejianmoshi {
      .see-mode-item {

        &.active {
          .see-mode-item-icon {
            background-image: linear-gradient(90deg,
                #09b157 0%,
                #058342 100%),
              linear-gradient(#00cbe5,
                #00cbe5);
            border-width: 0;
            color: #fff;
          }

          .see-mode-item-label {
            color: #d9d8d8;
          }
        }
      }
    }
  }

</style>
